<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 图表
const activeName = ref('pie')
// echarts绘制图形
// 1.下载导入echarts
// 2.准务具有宽与高的容器
// 3.初始化echarts实例
// 4.准务数据
// 5.实例.setOption(数据)

// vue3: setup
// onBeforeMount  onMounted
// onBeforeUpdate  onUpdated
// onBeforUnmount onUnmounted
const pieRef = ref()
onMounted(() => {
  const pieCharts = echarts.init(pieRef.value)
  const option = {
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },

    series: [
      {
        name: '我的图形',
        type: 'pie',
        radius: ['10%', '70%'],
        center: ['50%', '50%'],
        roseType: 'radius',
        itemStyle: {
          borderRadius: 0,
        },
        data: [
          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' },
        ],

        label: {
          fontSize: 10,
        },
        labelLine: {
          // 连接扇形图线长
          length: 6,
          // 连接文字线长
          length2: 8,
        },
      },
    ],
  }
  pieCharts.setOption(option)
})
</script>

<template>
  <!-- 数据统计信息 -->
  <el-row :gutter="20" class="data">
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="title">总销售额</span>
        </template>
        <div class="content">
          <div class="icon">
            <i class="iconfont icon-dingdandaifukuan"></i>
          </div>
          <div class="info">33,350</div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="title">总销售额</span>
        </template>
        <div class="content">
          <div class="icon">
            <i class="iconfont icon-dingdandaifukuan"></i>
          </div>
          <div class="info">33,350</div>
        </div>
      </el-card></el-col
    >
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="title">总销售额</span>
        </template>
        <div class="content">
          <div class="icon">
            <i class="iconfont icon-dingdandaifukuan"></i>
          </div>
          <div class="info">33,350</div>
        </div>
      </el-card></el-col
    >
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="title">总销售额</span>
        </template>
        <div class="content">
          <div class="icon">
            <i class="iconfont icon-dingdandaifukuan"></i>
          </div>
          <div class="info">33,350</div>
        </div>
      </el-card></el-col
    >
  </el-row>

  <!-- 图表 -->
  <div class="charts">
    <el-tabs v-model="activeName">
      <el-tab-pane label="饼状图" name="pie">
        <div class="pie" ref="pieRef"></div>
      </el-tab-pane>
      <el-tab-pane label="线形图" name="line">线形图</el-tab-pane>
      <el-tab-pane label="柱状图" name="bar">柱状图</el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.data {
  // vue中的样式穿透 修改第三方组件内部的样式

  // vue3: ::v-deep(选择器) {样式}
  ::v-deep(.el-card__header) {
    border: 0;
  }

  ::v-deep(.el-card__body) {
    padding-top: 0;
    padding-bottom: 10;
  }

  .title {
    font-size: 14px;
    color: #999;
  }

  .content {
    display: flex;
    align-items: center;
    .icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ff0067;
      text-align: center;

      .iconfont {
        font-size: 24px;
        color: #fff;
        line-height: 40px;
      }
    }
    .info {
      font-size: 40px;
      margin-left: 15px;
    }
  }
}

.charts {
  width: 100%;
  height: 520px;
  margin-top: 15px;
  padding: 15px;
  background-color: #fff;

  .pie {
    width: 100%;
    height: 420px;
  }
}
</style>
